<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<!-- <view class="back iconfont icon-xiangzuo1" @tap="backPage"></view> -->
			<view class="text">订单</view>
		</view>			
		
		<view class="nav" :class="scrrol == true ? 'scrrolHeader02' : ''">
			<view class="navauto">
				<block v-for="(item, index) in menu" :key="index">
					<view class="menu" :data-index="index" @tap="setNavMenu">
						<view class="text" :class="index == select ? 'menucolor' : ''">{{ item.text }}</view>
						<view class="line" :class="index == select ? 'menucolor02' : ''">
							<image src="/static/xiao.png" mode="widthFix"></image>
						</view>
					</view>
				</block>
			</view>
		</view>
		
		<view class="clear_box"></view>
		<view style="height: 14vw;"></view>
		
	<block v-for="(item,index) in list" :key="index">
		<view class="order_list" :data-url="'/pages/order/details?id='+item.id" @click="gotopage">
			<view class="order_text">
				<view class="text_box">
					<view class="title_box">
						<view class="title">{{item.car_info.car_no||'暂无车牌'}}</view>
						<view class="type" v-if="item.loans_status == 0">待审核</view>
						<view class="type" v-else-if="item.loans_status == 1">已通过</view>
						<view class="type" v-else-if="item.loans_status == 2">已驳回</view>
						<view class="type" v-else-if="item.loans_status == 3">已完成</view>
					</view>
					<view class="text">{{item.car_info.title}}</view>
				</view>
				<view class="order_img" v-if="item.loans_status == 0 || item.loans_status == 1">
					<image :src="'/static/car/car0'+item.car_info.type_id+'.png'" mode="widthFix"></image>
				</view>
				
				<view class="order_menu" v-if="item.loans_status == 3" @click.stop="$r('/pages/personalcenter/appoint/retreaty?id='+item.id)">去还款</view>
				
				<view class="order_menu order_menu02" v-if="item.loans_status == 2" @click.stop="$r('/pages/index/form01?order_id='+item.id)">重新申请</view>
				
			</view>
			<view class="rule_box ruleGo" v-if="item.loans_status == 1" >您的审核已通过，请尽快签约领取</view>
			<view class="rule_box ruleNo" v-if="item.loans_status == 2" >{{item.reason||'经审核资料信息不一致'}}</view>
			
			<view class="standing">
				<view class="stand">申请人：{{item.user_info.truename}}</view>
				<view class="stand">手机号码：{{item.user_info.phone}}</view>
				<view class="stand">申请时间：{{item.create_time}}</view>
			</view>
			
			<view class="tips" v-if="item.loans_status == 1">注：请保存电话通畅，会有专员来电提供服务。</view>
			
			<view class="menu_box" v-if="item.loans_status == 1">
				<view class="icon icon01 iconfont icon-shenpi"></view>
				<view class="menu_text">审批金额</view>
				<view class="menu_num">{{item.money}}</view>
				<view class="menu" :data-url="'/pages/order/contract?id='+item.id+'&sign_money='+item.money" @tap.stop="gotopage">去签约</view>
			</view>
			<view class="menu_box" v-if="item.loans_status == 3">
				<view class="icon icon01 iconfont icon-shenpi"></view>
				<view class="menu_text">发放金额</view>
				<view class="menu_num">{{item.money}}</view>
				<view class="menu" style="background-color: #5F6488;">已签约</view>
			</view>
			<view class="menu_box" v-if="item.loans_status == 3" >
				<view class="icon icon02 iconfont icon-shenpi"></view>
				<view class="menu_text">分期方式</view>
				<view class="menu_num" v-if="item.rate_type == 0">等额本息</view>
				<view class="menu_num" v-else>等额本金</view>
				<view class="menu_period">分期期数  {{item.loans_num}}期</view>
			</view>
		</view>
	</block>
	
	<block v-if="empty">
		<view style="margin-top: 20vw;" v-if="list.length==0">
			<u-empty mode="data" iconSize="120" ></u-empty>
		</view>
	</block>

		
	
		
	
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
	
				scrrol:false,
				page : 1,
				empty_text : '暂无信息',
				load_type : 'more',
				empty : 0,
				list : [],
				select:0,
				menu: [
					{
						text: '全部'
					},
					{
						text: '待审核'
					},
					{
						text: '已通过'
					},
					{
						text: '已完成'
					},
					{
						text: '已驳回'
					},
				],
				
			}
		},
		onPageScroll: function(Object) {
			if (Object.scrollTop > 28) {
				this.scrrol = true;
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
			}
		},
		onReachBottom() {
		    this.loadData();
		},
		onLoad(opt) {
			this.select = opt.otype||0;
			uni.$on('init_order',()=>{
				this.pageinit();
			});
            this.loadData();
		},
		onUnload() {
			uni.$off('init_order');
		},
		methods: {
			setNavMenu(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.select = index;
				this.pageinit();
				
			},
			pageinit(){
				this.page = 1;
				this.list = [];
				this.load_type = 'more';
				this.empty = 0;
				this.loadData();
			},
			loadData(){
				if(this.load_type == 'loading' || this.load_type == 'no_more'){
					return;
				}
				let url = this.site_url + 'api/auth/order/loans_order_list?page='+this.page+'&otype='+this.select;
			   
				this.areq(url).then(res=>{
					this.empty = 1;
					 if(res.code == 1){
						 this.page++; 
						 this.load_type = 'more';
						 this.list = [...this.list,...res.data];
					 }else{
						this.load_type = 'no_more';
					}
					
				})
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				this.$r(url);
			},

		},
	
	
	}
</script>

<style>
	.scrrolHeader{
		background-color: #FC5D20 !important;
	}
	.scrrolHeader02{
		background-color: #fff !important;
	}
	.nav {
		width: 100%;
		height: 13.5vw;
		overflow: hidden;
		overflow-x: auto;
		position: fixed;
		left: 0;
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 99;
		/* background-color: #fff;
			border-bottom: 1px solid #e8e8e8; */
		box-sizing: border-box;
	}
	
	.nav .navauto {
		width: fit-content;
		display: flex;
		/* margin-left: 4%; */
		min-width: 100%;
	}
	
	.nav .navauto .menu {
		width: 20%;
		position: relative;
	}
	
	.nav .navauto .menu .text {
		font-size: 4.2vw;
		color: #666666;
		text-align: center;
		line-height: 13.5vw;
	}
	
	.nav .navauto .menu .line {
		width: 24%;
		border-radius: 3vw;
		position: absolute;
		left: calc(50% - 10%);
		bottom: 1vw;
		display: none;
	}
	
	.nav .navauto .menu .line image{
		width: 100%;
	}
	
	.menucolor {
		color: #091624 !important;
		font-weight: bold;
		font-size: 4.4vw !important;
	}
	
	.menucolor02 {
		display: block !important;
	}
	
	.menucolor03 {
		background-color: #FF9822 !important;
	}
	
	.order_list{
		width: 92%;
		margin: 4% auto 0;
		background-color: #fff;
		padding: 4%;
		border-radius: 3vw;
		box-sizing: border-box;
	}
	
	.order_list .order_text{
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.order_list .order_text .order_menu{
		font-size: 3.5vw;
		color: #fff;
		background-color: #FC5D20;
		height: 9vw;
		border-radius: 9vw;
		width: 20vw;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
	}
	
	.order_list .order_text .order_menu02{
		background-color: #FF4246;
	}
	
	.order_list .order_text .text_box{
		flex: 1;
	}
	
	.order_list .order_text .text_box .title_box{
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.order_list .order_text .text_box .title_box .title{
		font-size: 5vw;
		font-weight: bold;
		color: #333;
		margin-right: 3vw;
	}
	
	.order_list .order_text .text_box .title_box .type{
		height: 5vw;
		padding: 0 1.5vw;
		border-radius: 0.8vw;
		font-size: 3vw;
		letter-spacing: 1px;
		font-weight: bold;
		color: #fff;
		background-color: #5F6488;
		transform: skew(-15deg);
		display: flex;
		align-items: center;
	}
	
	.order_list .order_text .text_box .text{
		width: 100%;
		font-size: 3.5vw;
		color: #666666;
		margin-top: 2vw;
	}
	
	.order_list .order_text .order_img{
		width: 28vw;
		margin-left: 3vw;
	}
	
	.order_list .order_text .order_img image{
		width: 100%;
	}
	
	.order_list .rule_box{
		font-size: 3.3vw;
		font-weight: bold;
		height: 10vw;
		padding: 0 4%;
		display: flex;
		align-items: center;
		margin-top: 4%;
		border-radius: 2vw;
	}
	
	.ruleGo{
		background-color: #F7FEFB !important;
		color: #1FC092 !important;
	}
	
	.ruleNo{
		background-color: #FFF9F9 !important;
		color: #FF4246 !important;
	}
	
	.order_list .standing{
		width: 100%;
		padding: 3vw;
		border-radius: 2vw;
		background-color: #F8F8F8;
		margin-top: 4%;
	}
	
	.order_list .standing .stand{
		color: #666;
		font-size: 3.5vw;
		margin-top: 1vw;
	}
	
	.order_list .standing .stand:nth-child(1){
		margin-top: 0;
	}
	
	.order_list .tips{
		font-size: 2.8vw;
		color: #FC5D20;
		margin-top: 4%;
	}
	
	.order_list .menu_box{
		width: 100%;
		margin-top: 4%;
		display: flex;
		align-items: center;
	}
	
	.order_list .menu_box .icon{
		font-size: 5vw;
		margin-right: 1vw;
	}
	
	.order_list .menu_box .icon01{
		color: #1FC092;
	}
	
	.order_list .menu_box .icon02{
		color: #FC5D20;
	}
	
	.order_list .menu_box .menu_text{
		font-size: 3.5vw;
		color: #666;
		margin-right: 1vw;
	}
	
	.order_list .menu_box .menu_num{
		flex: 1;
		font-size: 3.8vw;
		color: #333;
		font-weight: bold;
		margin-right: 1vw;
	}
	
	.order_list .menu_box .menu_period{
		font-size: 3.5vw;
		color: #666;
	}
	
	.order_list .menu_box .menu{
		font-size: 3.5vw;
		color: #fff;
		background-color: #1FC092;
		height: 9vw;
		border-radius: 9vw;
		width: 20vw;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
	}
	
</style>
